import React from 'react';
import { Tabs, WhiteSpace } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import ListSwipe from 'react-list-swipe';
import  'react-list-swipe/lib/listSwiper.less';


const tabs = [
    { title: '订单' },
    { title: '定制订单'},
];
export default class OrderList extends React.Component{
    constructor(props) {
        super(props);
        this.state={
        orderList:[],
            show:false,
            isData:false,
            index:1
    }

    }
    componentWillMount(){
        this.page(localStorage.getItem("userid"));
    }

    /**
     * 获取数据
     * */
    getOrderList(userid){
        fetch('text/order.json',
            {
                method: 'get',
                headers: {
                    'Accept': 'application/json',
                    "Content-Type": "application/json"
                },

            }
        ).then(function(response) {
            return response.json();
        }).then((json)=>{
            this.setState({
                orderList:json.order,
            })
            if(json.isData==true){
                this.setState({
                    isData:true,
                })
            }else {
                this.setState({
                    isData:false,
                })
            }
        }).catch(function(ex) {
            console.log('parsing failed', ex)
        })
    }
    //删除
    deleteOrder(index,id){
        fetch('text/deleteOrder.json',
            {
                method: 'get',
                headers: {
                    'Accept': 'application/json',
                    "Content-Type": "application/json"
                },

            }
        ).then(function(response) {
            return response.json();
        }).then((json)=>{
            if(json.state=="400"){
                var item = (this.state.orderList).splice(index,1);
                this.setState({
                    orderList:this.state.orderList,
                })

            }else{
                this.setState({
                    show:true,
                })
            }
        }).catch(function(ex) {
            console.log('parsing failed', ex)
        })
    }
    //分页
    page(userid){
        fetch('text/order.json',
            {
                method: 'get',
                headers: {
                    'Accept': 'application/json',
                    "Content-Type": "application/json"
                },

            }
        ).then(function(response) {
            return response.json();
        }).then((json)=>{

            this.setState({
                orderList:this.state.orderList.concat(json.order),
                index:++this.state.index,
            })

            if(json.isData==true){
                this.setState({
                    isData:true,
                })
            }else {
                this.setState({
                    isData:false,
                })
            }
        }).catch(function(ex) {
            console.log('parsing failed', ex)
        })
    }


    //确定
    confirmButton(){
        this.setState({
            show:false,
        })
    }

    render(){
        return  (
            <div style={{margin:'15px'}}>
                <WhiteSpace />
                <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false} swipeable={false}>
                    <div style={{ display: 'flex', marginTop:'35px', alignItems: 'center', justifyContent: 'center',}}>
                        <ul style={{width:"100%"}} >
                            <li>
                                <ListSwipe>
                                    {
                                        this.state.orderList.map((item,index)=>{
                                            return(
                                                <div className="swipe-list-view-cell" key={index}>
                                                    <div className="swipe-right-btn bg-success" onClick={this.deleteOrder.bind(this,index,item.id)}>
                                                        删除
                                                    </div>

                                                    <div className="swipe-handle" style={{overflow:'hidden'}}>
                                                        <p className='order-des'>订单明细</p>
                                                        <a href="#">
                                                            <div className='order-list'>
                                                                <ul className='clearfloat'>
                                                                    <li className='title'>订购项目：</li>
                                                                    <li className='content'>{item.projects}</li>
                                                                </ul>
                                                                <ul className='clearfloat'>
                                                                    <li className='title'>订单状态：</li>
                                                                    <li className='content'>{item.orderState}</li>
                                                                </ul>
                                                                <ul className='clearfloat'>
                                                                    <li className='title'>服务时间：</li>
                                                                    <li className='content'>{item.serverHour}</li>
                                                                </ul>
                                                                <ul className='clearfloat'>
                                                                    <li className='title'>上门地址：</li>
                                                                    <li className='content'>{item.serverAddress}</li>
                                                                </ul>
                                                                <ul className='clearfloat'>
                                                                    <li className='title'>订单金额：</li>
                                                                    <li className='content'>{item.orderPrice}</li>
                                                                </ul>
                                                                <ul className='clearfloat'>
                                                                    <li className='title'>服务人员：</li>
                                                                    <li className='content'>{item.serverStuff}</li>
                                                                </ul>
                                                                <div className={(item.orderState=='未支付'?'show':'hidden')+" "+"pay-w"}>
                                                                    <div className="all-button10" style={{display:'block',marginTop:'10px'}}>
                                                                        去支付
                                                                    </div>

                                                                    <div className='clear-both'></div>
                                                                </div>

                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }

                                </ListSwipe>
                                <div  className={this.state.isData? 'show all-button5':'hidden'} id="order-list-more" onClick={this.page.bind(this,localStorage.getItem("userid"))}>加载更多</div>
                            </li>
                        </ul>

                    </div>
                    <div style={{ display: 'flex',marginTop:'35px', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                        Content of second tab
                    </div>
                </Tabs>
                <WhiteSpace />
                <div className={(this.state.show?'show':'hidden')+" " +"tip"}>
                    <div className="tip-content">
                        <div className="tip-inner">
                            <div className="tip-title">提示</div>
                            <div className="tip-text">未完成订单不能删除</div>
                        </div>
                        <div className="tip-buttons">
                            <span className="tip-button" onClick={this.confirmButton.bind(this)}>确定</span>
                        </div>
                    </div>
                </div>
            </div>
        );

    }
}



